/*
 * @Description: 搜索框
 * @Author: Zzt
 * @Date: 2022-08-23 15:23:59
 * @LastEditTime: 2023-03-10 16:50:42
 */
import { submitEntrySearch } from '@/api/search';
import { Button, Input, message, Popover, Select, Space } from 'antd';
import classNames from 'classnames/bind';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { SearchOutlined } from '@ant-design/icons';
import Search from 'antd/lib/input/Search';
import { useLocalStorageState } from 'ahooks';
import styles from '../styles/seach.module.scss';
import { fetchRepoList } from '@/api/archivesType';

const cx = classNames.bind(styles);

const EntrySearchFrame = (props: any) => {
  const [keywordList, setKeywordList] = useLocalStorageState('keywordList', { defaultValue: [] });
  const { conditions, fieldConditionList, match, type } = props;
  const title = type === 1 ? '条目检索' : '关联检索';
  const [dbNameList, setDbNameList] = useState([]);
  const [dbName, setDbName] = useState('data');
  console.log(match);
  const [searchStr, setSearchStr] = useState('');
  // const prefix = <SearchOutlined className={cx('prefix')} />;
  const navigate = useNavigate();

  function changeState(searchStr: any) {
    setKeywordList([...keywordList, searchStr]);
  }
  const submitSearch = () => {
    if (searchStr === '') {
      message.warning('请输入关键字');
      return;
    }
    changeState(searchStr);
    const keywords = searchStr;
    const fondsConditionList = conditions;
    console.log('fondsConditionList', fondsConditionList);
    if (fondsConditionList.length === 0 || fondsConditionList[0].atConditionList.length === 0) {
      message.warning('请选择档案类型');
      return;
    }
    const exactMatch = match.some((item: any) => item === 'exactMatch');
    const originalMatch = match.some((item: any) => item === 'originalMatch');
    console.log('exactMatch', exactMatch, originalMatch);
    const commonParams = { dbName };
    const query = {
      pageNo: 1,
      pageSize: 10
    };
    // const param = { condition, scope };
    const param = {
      fondsConditionList,
      commonParams,
      fieldConditionList,
      keywords,
      exactMatch,
      originalMatch
    };
    console.log('submit', { ...query, param });
    submitEntrySearch({ ...query, param }).then((res: any) => {
      const { data } = res;
      navigate('../another-result', {
        state: { data, params: { ...query, param }, type, searchStr }
      });
    });
  };

  const valueInput = (value: any) => {
    setSearchStr(value.target.value);
  };

  const content = () => {
    return (
      <>
        <Space>
          {Array.from(new Set(keywordList)).map((res: any) => (
            <Button onClick={() => onInput(res)} key={res.index} size={'small'}>
              {res}
            </Button>
          ))}
        </Space>
      </>
    );
  };

  const onInput = (res: any) => {
    setSearchStr(res);
  };

  const onClick = () => {
    setKeywordList([]);
  };

  const head = () => {
    return (
      <div className={cx('headOut')}>
        <div className={cx('headIn')}>最近的关键词：</div>
        <div>
          <Button type="link" onClick={onClick}>
            一键清空
          </Button>
        </div>
      </div>
    );
  };
  /* 选取dbName */
  useEffect(() => {
    fetchRepoList({ atType: 1 }).then((res: any) => {
      const { data } = res;
      setDbNameList(data);
    });
  }, []);
  const changeDbName = (eve: any) => {
    setDbName(eve);
  };
  const dbNameSelect = (
    <Select
      className="select-before"
      bordered={false}
      defaultValue="data"
      size="small"
      options={dbNameList}
      fieldNames={{ label: 'description', value: 'name' }}
      onChange={changeDbName}
    />
  );
  return (
    <>
      <div className={cx('search')}>
        {keywordList.length === 0 ? (
          <>
            <Search
              placeholder="请输入关键词"
              enterButton={title}
              onSearch={submitSearch}
              prefix={dbNameSelect}
              value={searchStr}
              size={'large'}
              onChange={valueInput}
            />
          </>
        ) : (
          <Popover placement="bottom" title={head} content={content} trigger="click">
            <Search
              placeholder="请输入关键词"
              enterButton={title}
              onSearch={submitSearch}
              prefix={dbNameSelect}
              value={searchStr}
              size={'large'}
              onChange={valueInput}
            />
          </Popover>
        )}
      </div>
    </>
  );
};
export default EntrySearchFrame;
